<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <table border="1" align="center" cellspacing="10" cellpadding="0">
            <tr v-for="(row, index) in buttons" :key="index">
                <td v-for="(button, buttonIndex) in row" :key="buttonIndex">
                    <input type="button" :value="button.value" @click="onNumberClick(button.value)" v-if="typeof button.value === 'number'">
                    <input type="button" :value="button.value" @click="onAddClick()" v-else-if="button.value === '+'">
                    <input type="button" :value="button.value" @click="onCalculateClick()" v-else-if="button.value === '='">
                </td>
            </tr>
            <tr>
                <td colspan="5"><input type="text" id="result" readonly v-model="result"></td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                result: '',
                buttons: [
                    [{ value: 0 }, { value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }],
                    [{ value: 5 }, { value: 6 }, { value: 7 }, { value: 8 }, { value: 9 }],
                    [{ value: '+' }, { value: '-' }, { value: '*' }, { value: '/' }, { value: '=' }],
                ]
            },
            methods: {
                onNumberClick(value) {
                    this.result += value;
                },
                onAddClick() {
                    this.result += '+';
                },
                onCalculateClick() {
                    try {
                        this.result = eval(this.result);
                    } catch (error) {
                        this.result = 'Error';
                    }
                }
            }
        });
    </script>
</body>
</html>
